import {Button, Row, Col,Typography, List, Tabs} from 'antd';
import {EditOutlined,CloseCircleOutlined,PlusOutlined} from '@ant-design/icons';
import type { TabsProps } from 'antd';
import {useState} from "react";
import style from './style.less'
import FunctionPermission from './FunctionPermission'
import MenuPermission from './MenuPermission'
import UserList from './User'
 
const { Title } = Typography;
const roleList = [
    {
        id: '1',
        content: '233332221'
    },
    {
        id: '2',
        content: '2333322'
    }
]
const items: TabsProps['items'] = [
    {
      key: '1',
      label: `功能权限`,
      forceRender:true,
      children:<FunctionPermission/>
    },
    {
      key: '2',
      label: `菜单权限`,
      forceRender:true,
      children:<MenuPermission/>
    },
    {
      key: '3',
      label: `用户列表`,
      forceRender:true,
      children:<UserList/>
    },
];

const Role = () => {
    const [ loading ] = useState(false);
    const [type, setType] = useState<string>('1');
    // const [ roleList ] = useState<any[]>([]);
    return (
        <div className={style.wrapper}>
            <section>
                <Row gutter={16}>
                    <Col span={6}>
                        <section>
                            <Title level={5}>角色</Title>
                        </section>
                        <section>
                        <List
                            className="style.rolelist"
                            loading={loading}
                            itemLayout="horizontal"
                            split={false}
                            dataSource={roleList}
                            renderItem={(item) => (
                                <List.Item
                                actions={[<EditOutlined style={{ fontSize: '16px', color: '#1890ff' }}/>, <CloseCircleOutlined style={{ fontSize: '16px', color: '#f81d22' }}/>]}
                                >
                                <div>{item.content}</div>
                                </List.Item>
                            )}
                            />
                        </section>
                        <section>
                            <Button type="primary" icon={<PlusOutlined />} block>
                                    新增角色
                            </Button>
                        </section>
                    </Col>
                    <Col span={18}>
                        <Tabs activeKey={type} items={items} onChange={setType} />
                        {/* {type==='1' && (
                            <div>
                                <FunctionPermission/>
                            </div>
                        )}
                         {type==='2' && (
                            <div>
                                <MenuPermission/>
                            </div>
                        )}
                         {type==='3' && (
                            <div>
                                <UserList/>
                            </div>
                        )} */}
                    </Col>
                </Row>
            </section>
        </div>
    )
}

export default Role